<template>
  <div class="geek-icon">
    <svg class="icon" aria-hidden="true">
      <use :xlink:href="`#icon-${name}`"></use>
    </svg>
  </div>
</template>
<script>
export default {
  name: 'GeekIcon',
  props: {
    // 字体图标名字，不需要icon-
    name: {
      type: String,
      default: ''
    }
  }
}
</script>
<style scoped lang="less">
.geek-icon {
  display: inline-block;
  position: relative;
  // 控制图标大小：geek-icon 的font-size多大，字体图标就多大
  // svg的图标都会有字体的颜色，能不能设置颜色要看，图标自己有没有开放设置。
  // 如果开放颜色的设置：父元素的color来设置
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
}
</style>
